<template>
	<view >
		<view  v-if="drawer_show" class="uni-drawer uni-drawer--visible" @touchmove>
			<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': drawer_show }" @tap="close" />
			<view class="uni-drawer__content"  :class="{'uni-drawer--right': drawer_show,'uni-drawer--left': !drawer_show, 'uni-drawer__content--visible': drawer_show}">
				<view class="drawer_content"  >
					<view class="close" @tap="close">确定</view>
					<view class="drawer_title">选择车系车型</view>
					<view class="style_name">{{list_style['name']}}</view>
					<view class="style_list">
						<text v-bind:class="[select_style_name == value['name'] ? 'hover' : '']" v-for="(value,idx) in list_style['list']"
						 :key="idx" @click="select_style(value)">{{value['name']}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list" @touchmove>
			<view   class="content" v-for="(value,index) in list_series" :key="index">
				<template v-if="value['list'].length > 0">
					<view class="first">
						{{value['letter']}}
					</view>
					<view class="series" v-for="(value2,index2) in value['list']" :key="index2">
						<text v-bind:class="[index2 == 0 ? 'no_border' : '']"   @click="change_style(value2)">
							{{value['name']}}{{value2['name']}}
						</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCarModelStyleName
	} from "@/service/api/api";
	export default {
		data() {
			return {
				drawer_show: false,
				list_series: [],
				list_style: [],
				select_style_name: '',
				intentionCar: {}
			}
		},
		created() {
			this.get_list()
		},
		methods: {
			select_style(obj) {
				this.select_style_name = obj.name
				this.intentionCar = obj
			},
			close() {
				this.drawer_show = false
				/*
				intentCarBrand
				意向品牌
				intentCarModel
				意向车系
				intentCarStyle
				意向车型*/
				this.$store.commit('changeIntentionCar', {
					intentGroupName: this.intentionCar.groupName,
					intentCarBrand: this.intentionCar.makeName,
					intentCarModel: this.intentionCar.modelName,
					intentCarStyle: this.intentionCar.name
				})
				uni.navigateBack()
			},
			get_list() {
				getCarModelStyleName({
					brandId: uni.getStorageSync('user_info').brandId || ''
				}).then((res) => {
					if (res.data.code == 0) {
						this.list_series = res.data.data
					} else {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none'
						})
					}
				})
			},
			change_style(obj) {
				this.drawer_show = true
				this.list_style = obj
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 抽屉宽度 */
	.uni-drawer {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 999;
	}

	.uni-drawer__content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
		top: 0;
		// width: 526rpx;
		width: 75%;
		bottom: 0;
		background-color: #ffffff;
		transition: transform 0.3s ease;
	}

	.uni-drawer--left {
		left: 0;
		transform: translateX(-516rpx);
	}

	.uni-drawer--right {
		right: 0;
		transform: translateX(516rpx);
	}

	.uni-drawer__content--visible {
		transform: translateX(0px);
		overflow-y: scroll;
	}


	.uni-drawer__mask {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.4);
		transition: opacity 0.3s;
	}

	.uni-drawer__mask--visible {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		opacity: 1;
	}

	.close {
		position: absolute;
		top: 21rpx;
		right: 0;
		color: #3B86FF;
	}

	.style_list text {
		display: block;
		line-height: 80rpx;
		border-top: 1rpx solid #E4E4E4;
		text-indent: 10rpx;
	}

	.style_list text.hover {
		color: #fff;
		background: #3B86FF;
	}

	.drawer_title {
		text-align: center;
		line-height: 80rpx;
		height: 80rpx;
		font-size: 30rpx;
	}

	.drawer_content {
		font-size: 26rpx;
		position: relative;
		margin: 30rpx;
	}

	.style_name {
		font-size: 26rpx;
		line-height: 80rpx;
		padding-left: 30rpx;
	}

	.list {
		margin-right: 30rpx;
		font-size: 20rpx;
	}

	.first {
		background: #F2F2F2;
		padding-left: 30rpx;
		line-height: 46rpx;
		color: #777;
	}

	.series {
		margin-left: 30rpx;
		line-height: 80rpx;
		color: #333;
	}

	.series text {
		display: block;
		border-top: 1rpx solid #E4E4E4;
	}

	.no_border {
		border: none !important;
	}
</style>
